<!DOCTYPE html>
<html lang="en" layout:decorator="layout/main" xmlns:layout="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,initial-scale=1"/>

    <link rel="stylesheet" th:href="@{/thirdParty/datatables/dataTables.bootstrap.css}" />
    <link rel="stylesheet" th:href="@{/thirdParty/zTree/zTreeStyle.css}" />

    <title>角色</title>
</head>
<body>
    <section class="content" layout:fragment="content">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">角色列表</h3>
                </div>
                <div class="col-xs-12">
                    <button type="button" onclick="toAdd();" class="btn bg-purple margin pull-right"
                            data-toggle="modal" data-target="#myModal"><i class="fa fa-credit-card"></i> 添加角色
                    </button>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <table id="datasOnTable" class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>名称</th>
                            <th>标识</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>

        <!--dialog-->
        <div class="modal inmodal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content animated bounceInRight">
                    <form role="form" class="form-horizontal" id="updateFrom" th:action="@{/admin/role/updateRole}" method="post">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                            <i class="fa fa-laptop modal-icon"></i>
                            <h4 id="AAA" class="modal-title">编辑</h4>
                        </div>
                        <div class="modal-body col-xs-12">

                            <div class="zTreeDemoBackground left col-xs-6" >
                                <ul id="treeMenu" class="ztree"></ul>
                            </div>

                                <div class="zTreeDemoBackground right col-xs-6">
                                    <input type="hidden" name="roleId" id="roleId"/>
                                    <input type="hidden" name="menuIds" id="menuIds"/>
                                    <div class="form-group">
                                        <label for="name">角色名称</label>
                                        <input type="text" class="form-control" id="description" name="description" placeholder="输入分类名称" />
                                    </div>
                                    <div class="form-group">
                                        <label for="name">英文标识</label>
                                        <input type="text" class="form-control" id="name" name="name" placeholder="输入分类名称" />
                                    </div>
                                </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                            <button type="button" id="saveBtn" class="btn btn-primary">保存修改</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </section>


    <div layout:fragment="script">
        <script th:src="@{/thirdParty/datatables/jquery.dataTables.min.js}"></script>
        <script th:src="@{/thirdParty/datatables/dataTables.bootstrap.min.js}"></script>
        <script th:src="@{/thirdParty/zTree/jquery.ztree.all.min.js}"></script>
        <script th:src="@{/thirdParty/jquery.form.js}" />
        <script>
            $(function () {

                $("#datasOnTable").dataTable(
                        {
                            "filter" : false,//去掉搜索框
                            "ordering" : false,
                            "lengthChange": false,
                            "paginationType" : "full_numbers",
                            "destroy" : true,
                            "processing" : true,
                            "serverSide" : true,
                            "ajax" : {
                                "type":"get",
                                "url" :  ctx+"admin/role/list",
                                "dataSrc": "content",
                                "dataFilter": function(data){
                                    var json = jQuery.parseJSON( data );
                                    json.recordsTotal = json.totalElements;
                                    json.recordsFiltered = json.totalElements;
                                    return JSON.stringify( json ); // return JSON string
                                },
                                "data": function (d) {
                                },
                                "error" : function(){
                                    alert("请求数据出错");
                                }
                            },
                            "columns" : [
                                {
                                    "data" : "id"
                                },
                                {
                                    "data" : "description"
                                },
                                {
                                    "data" : "name"
                                },
                                {
                                    "data" : null,
                                    "render":function(data,type,row){
                                        var str = '<button onclick="changeDialog('+row['id']+')" type="button" class="btn btn-white" data-toggle="modal" data-target="#myModal"><i class="fa fa-pencil"></i> Edit </button>';
                                        return str;
                                    }
                                }],
                            "language" : {
                                "url" : ctx+'thirdParty/datatables/dataTables.CN.txt'
                            }
                        });

                //编辑确认按钮
                $("#saveBtn").bind("click",function() {

                    beforeSubmit();
                    $("#updateFrom").ajaxSubmit({
                        success:function(){
                            alert("成功");
                            $('#myModal').modal('hide');
                            var roleId = $("#roleId").val();
                            if(roleId=='') {
                                window.location.href=ctx+"admin/role/listPage";
                            }
                        },
                        error: function (xhr, status, error) {
                            var result = jQuery.parseJSON(xhr.responseText);
                            alert(result.message);
                        }
                    });

                });

            });

            function beforeSubmit(){
                var treeNodes = $.fn.zTree.getZTreeObj("treeMenu").getCheckedNodes(true);
                var stnIds = "";
                for(var i= 0;treeNodes.length>i;i++){
                    var tn = treeNodes[i];
                    stnIds += tn.id+",";
                }
                if(stnIds==''){
                    alert("请选择节点,不能为空");
                    return false;
                }else{
                    var roleId = $("#roleId").val();
                    $("#menuIds").val(stnIds);
                }

            }

            function toAdd(){
                changeDialog(0);
            }

            function changeDialog(id){
                console.log(id);
                if(id!=0) {
                    $("#roleId").val(id);
                }
                var zTreeObj;
                $.ajax({type:"get",
                    url:ctx+"admin/role/roleMenus",
                    data:{"roleId":id},
                    dataType:"json",
                    error: function(){
                        alert("系统忙，请稍后再试！");
                    },
                    success:function(json){
                        var setting = {
                            check: {
                                enable: true
                            },
                            data: {
                                simpleData: {
                                    enable: true
                                }
                            }
                        };
                        console.log(json);
                        zTreeObj = $.fn.zTree.init($("#treeMenu"), setting, json);
                    }
                });

                if (id=='') {
                    id=0;
                }
                $.ajax({type:"get",
                    url:ctx+"admin/role/roleInfo/"+id,
                    data:{"id":id},
                    dataType:"json",
                    error: function(){
                        alert("系统忙，请稍后再试！");
                    },
                    success:function(json){
                        console.log(json);
                        $("#description").val(json.description);
                        $("#name").val(json.name);
                    }
                });
            }
        </script>
    </div>


</body>
</html>